<template>
  <div id="mapV" :style="mapstyle">
    <!-- <div :style="mapstyle">
      <el-bmap class="bmap-box" :zoom="zoom" :center="center" :vid="'bmap-vue'">
        <el-bmapv-view>
          <el-bmapv-gltf-layer
            :scale="200"
            url="./assets/gltf/car2.gltf"
            :data="data"
          ></el-bmapv-gltf-layer>
        </el-bmapv-view>
      </el-bmap>
    </div> -->
    <el-bmap vid="bmapDemo" :zoom="zoom" :center="center" class="bmap-demo">
      <el-bmapv-view :lazy="300">
        <el-bmapv-point-layer
          :lazy="2000"
          :zoom-threshold="[12, 15]"
          :color="color"
          :shape="shape"
          :blend="blend"
          :size="size"
          :data="data"
          :enable-picked="true"
          :auto-select="true"
          :on-click="
            (e) => {
              clickMarker(e);
            }
          "
        ></el-bmapv-point-layer>
      </el-bmapv-view>
    </el-bmap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      zoom: 14,
      echarts: [],
      mapstyle: {},
      center: [121.5273285, 31.21515044],
      color: "rgba(50, 50, 200, 1)",
      shape: "circle", // 默认为圆形 circle ，可传 square 改为正方形
      blend: "lighter",
      size: 40,
      data: [],
    };
  },

  mounted() {
    this.worldMapContainer = document.getElementById("mapV");
    //设置容器高宽
    this.resizeWorldMapContainer();

    // setTimeout(() => {}, 2000);
    // setTimeout(() => {
    //   this.data = [
    //     {
    //       geometry: {
    //         type: "POINT",
    //         coordinates: [121.5273285, 31.21515044],
    //       },
    //     },
    //     {
    //       geometry: {
    //         type: "POINT",
    //         coordinates: [121.5483395, 31.21515154],
    //       },
    //     },
    //   ];
    // }, 4000);
  },

  methods: {
    resizeWorldMapContainer() {
      let height = window.innerHeight - 40 + "px";
      this.worldMapContainer.style.height = window.innerHeight - 40 + "px";
      this.mapstyle = `height: ${height}`;
    },

    clickMarker(e) {},

    getData(echarts) {
      this.echarts = [];
      if (echarts) {
        this.echarts = echarts[0].dataList;
      }
      if (this.echarts && this.echarts.length > 0) {
        this.color = "red";
        let arr = [];
        this.echarts.forEach((e) => {
          if (e.lng != undefined && e.lat != undefined && !e.color) {
            // this.data.push({
            //   lng: e.lng,
            //   lat: e.lat,
            //   area: e.area,
            //   value: e.the_data,
            //   unit: e.unit,
            // });
            arr.push({
              geometry: {
                type: "POINT",
                coordinates: [e.lng, e.lat],
              },
            });
          }
        });
        this.data = arr;
      }
    },
  },
};
</script>

<style>
</style>
